<template>
	<view class="shop-content" :style="{flexWrap:wrap}">
		<view v-for="item in dataList" :key="item.id" :style="{width:itemW,height:bigH}" @tap="goDetails(item.id)">
			<image class="image" :src="item.src" mode="widthFix"></image>
			<view class="text">
				{{item.text}}
			</view>
			<view class="price">
				<text class="pprice">¥{{item.price1}}</text>
				<text class="oprice">¥{{item.price2}}</text>
			</view>
			<view>
				<view class="discount">
					{{item.discount}}折
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		// 数据
		dataList: Array,
		//宽度
		itemW: {
			type: String,
			default: "375rpx"
		},
		//高度
		bigH: {
			type: String,
			default: "375rpx"
		},
		//是否换行
		wrap: {
			type: String,
			default: "wrap"
		},
		//商品文字大小
		nameSize: {
			type: String,
			default: "26rpx"
		}
	});
	const goDetails=(id)=>{
	uni.navigateTo({
		url:'/pages/details/details?id='+id
	})
	}
</script>

<style lang="scss" scoped>
	.card{
		width: 100%;
	}
	.shop-content {
		display: flex;
		text-align: center;
		.image {
			width: 100%;
		}

		.text {
			/* 在恰当的断字点进行换行 */
			word-break: break-all;
			/* 超出范围隐藏 */
			overflow: hidden;
			/* 文字超出用省略号 */
			text-overflow: ellipsis;
			/* 盒子模型 */
			display: -webkit-box;
			/* 显示的文本行数 */
			-webkit-line-clamp: 2;
			/* 子元素的垂直排列方式 */
			-webkit-box-orient: vertical;
		}

		.price {
			font-weight: bold;

			.pprice {}

			.oprice {
				text-decoration: line-through;
				color: #999;
			}
		}

		.discount {
			border: 2rpx solid #ff3333;
			border-radius: 4rpx;
			font-size: 20rpx;
			width: 60rpx;
			margin: 10rpx auto;
			color: #ff3333;
		}
	}
</style>
